<template>
    <div>
        <el-form :rules="rules" :model="formData" :ref="tid" label-width="20%" status-icon>

            <el-form-item label="类型">
                <el-radio-group v-model="formData.type">
                    <el-radio label="1">律师</el-radio>
                    <el-radio label="2">个人</el-radio>
                </el-radio-group>
            </el-form-item>

            <div v-if="parseInt(formData.type) === 1">

                <el-form-item label="姓名" :rules="rules.XM" prop="XM">
                    <el-input v-model="formData.XM"></el-input>
                </el-form-item>

                <el-form-item label="联系电话" :rules="rules.DH" prop="DH">
                    <el-input v-model="formData.DH"></el-input>
                </el-form-item>

                <el-form-item label="事务所" :rules="rules.SWS" prop="SWS">
                    <el-input v-model="formData.SWS"></el-input>
                </el-form-item>
            </div>


            <div v-else>


                <el-form-item label="姓名" :rules="rules.XM" prop="XM">
                    <el-input v-model="formData.XM"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" :rules="rules.ZJHM"  prop="ZJHM">
                    <el-input v-model="formData.ZJHM"  @blur="parseZJHM(formData.ZJHM)"></el-input>
                </el-form-item>

                <el-form-item label="性别" :rules="rules.XB" prop="XB">
                    <el-radio-group v-model="formData.XB">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="民族" :rules="rules.MZ" prop="MZ">
                    <MZ v-model="formData.MZ" @updatemz="onUpdateMz"></MZ>
                </el-form-item>


<!--                <el-form-item label="出生日期" :rules="rules.CSRQ" prop="CSRQ">-->
<!--                    <BirthdayPicker v-model="formData.CSRQ" @change="onBirthdayChange"></BirthdayPicker>-->
<!--                </el-form-item>-->
                <el-form-item label="出生日期" :rules="rules.CSRQ" prop="CSRQ">
                    <el-date-picker
                            v-model="formData.CSRQ"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="联系电话" prop="DH" :rules="rules.DH">
                    <el-input v-model="formData.DH"></el-input>
                </el-form-item>

                <el-form-item label="住址" prop="DZ" :rules="rules.DZ">
                    <el-input v-model="formData.DZ"></el-input>
                </el-form-item>
            </div>
    </el-form>



    </div>

</template>

<script>
    import BirthdayPicker from "@/components/Form/BirthdayPicker";
    import MZ from "@/components/Form/MZ";
    import IDValidator from 'id-validator';
    import moment from 'moment';
    import $rules from "@/components/Form/data/rules";
    import copy from 'fast-copy';

    export default {
        name: "SSDLR",
        components:{
            MZ,BirthdayPicker
        },
        props:{
          value:{
              type:Object
          },
          tid:{
              type:String
          }
        },
        created(){


        },
        data(){



            return{
                formData:copy(this.value),

                rules:{
                    XM:$rules.XM,
                    ZJHM:$rules.ZJHM,
                    XB:$rules.XB,
                    MZ:$rules.MZ,
                    SWS:{required:true,message:"事务所不能为空",trigger:'blur'},
                    DH:$rules.DH,
                    DZ:$rules.DZ,
                    CSRQ:$rules.CSRQ
                }
            }
        },

        computed: {

        },
        watch:{

          formData:{
              handler(nv,ov){
                  console.log(nv);
                  console.log(ov);
                  this.$emit('updatessldr',nv)
              },
              deep:true
          }
        },
        methods:{

            onUpdateMz(v){

                this.formData.MZ = v;
            },

            onBirthdayChange(v) {
                const t = this.$refs[this.tid];

                if(t){
                    this.$refs[this.tid].validateField('CSRQ')
                }
            },

            //解析证件号码
            parseZJHM(v) {

                let validator = new IDValidator();
                if (validator.isValid(v)) {
                    let info = validator.getInfo(v);

                    if(info.sex === 1){
                        this.formData.XB = '男';
                    }else{
                        this.formData.XB = '女';
                    }
                    let birth =  moment(info.birth)

                    this.formData.CSRQ = birth.format('YYYY-MM-DD')
                    // this.formData.CSRQ = {
                    //     "year":birth.year(),
                    //     "month":birth.month()+1,
                    //     "day":birth.date()
                    // }

                }
            },

            validateForm(){
                return this.$refs[this.tid].validate()
            }
        }
    }
</script>

<style scoped>

</style>